import { Graph } from '@antv/x6';
import { LocationNode } from './customNode';

interface NodePosition {
  x: number,
  y: number,
}

class GraphHalper {
  graph: Graph

  constructor(el: HTMLElement) {
    this.graph = new Graph({
      container: el,
      width: 800,
      height: 600,
      background: {
        color: '#fffbe6', // 设置画布背景颜色
      },
      grid: {
        size: 10, // 网格大小 10px
        visible: true, // 渲染网格背景
      },
      panning: {
        enabled: true,
        eventTypes: ['leftMouseDown', 'rightMouseDown', 'mouseWheel'],
      },
    });
  }

  // 绑定右键菜单
  onBlankContextmenu(fn: ({ e, x, y, cell, view }: any) => void) {
    this.graph.on('blank:contextmenu', fn);
  }

  // 注册自定义节点
  registerNode() {
    Graph.registerNode('location', LocationNode);
  }

  // 添加节点
  addNode(tag: string, position: NodePosition) {
    this.graph.addNode({
      shape: tag,
      x: position.x,
      y: position.y,
      width: 250,
      height: 250,
      attrs: {
        body: {
          'fill': 'blue',
          'class': 'text-class',
          'xlink:href': './logo.png',
          // href': 'https://gw.alipayobjects.com/zos/antfincdn/FLrTNDvlna/antv.png',
        },
      },
      markup: [
        {
          tagName: 'image',
          selector: 'body',
        },
      ],
    });
  }
}

export default GraphHalper;
